<template>
	<view class="patient-content">
		<view class="patient-information uni-flex">
			<view class="patient-portrait">
				<image src="/static/public/portrait02.png" mode="scaleToFill"></image>
			</view>
			<view class="patient-information-details uni-flex-item">
				<view class="uni-flex">
					<view class="uni-flex-item">{{dataDetail.customerName}}</view>
					<view class="btn-box"><text class="editBtn">编辑</text></view>
				</view>
				<view>{{dataDetail.customerAge}}岁 - {{changeType(dataDetail.customerSex)}}</view>
				<view>{{dataDetail.customerPhone}} - 妈妈</view>
				<view>{{dataDetail.medicalRecordNumber}} - 德米</view>
			</view>
		</view>
		<view class="patient-operation uni-flex">
			<view class="patient-operation-item">
				<image src="/static/public/details01.jpg" mode="scaleToFill"></image>
				<view>详细信息</view>
			</view>
			<view class="patient-operation-item">
				<image src="/static/public/details02.jpg" mode="scaleToFill"></image>
				<view>预约记录</view>
			</view>
			<view class="patient-operation-item">
				<image src="/static/public/details03.jpg" mode="scaleToFill"></image>
				<view>随访记录</view>
			</view>
			<view class="patient-operation-item">
				<image src="/static/public/details04.jpg" mode="scaleToFill"></image>
				<view>病例记录</view>
			</view>
			<view class="patient-operation-item">
				<image src="/static/public/details05.jpg" mode="scaleToFill"></image>
				<view>影像记录</view>
			</view>
			<view class="patient-operation-item" @tap="returnVisit_details">
				<image src="/static/public/details01.jpg" mode="scaleToFill"></image>
				<view>回访记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {customerDetail} from '@/static/api/patient.js'
	export default {
		data() {
			return {
				dataDetail:'',		// 存放患者详情对象
				parame:{
					arrivalTime:'',	// 页面顶部或底部记录的到店时间
					id:'',			// 客户id
					keyword:'',		// 查询关键字，根据患者姓名或电话查询
					limit:'',		// 每页显示记录数 为空则后台默认10条
					page:'',		// 当前页 为空则后台默认第一页
					refreshType:'',	// up:上拉,down:下拉
					selectedDept:''	// 选择的门诊
				}
			};
		},
		onLoad:function(option){
			let _this = this
			//	接受从上个页面传递过来的参数 ID
			_this.parame.id = option.id;
			
			//	取出存在 cookie 里面 abbreviation(门店缩写)
			uni.getStorage({
			    key: 'userInfo',
			    success: function (res) {
					_this.parame.selectedDept = res.data.outpatientShrink;
					//	请求患者详情数据
					customerDetail(_this.parame).then((res)=>{
						_this.dataDetail = res.data
					})
			    }
			});
		},
		methods: {
			//	根据后台返回的数字转换性别
			changeType(type){
				return type == 1 ? "女" : type==2 ? '男' : '';
			},
			// 回访详情
			returnVisit_details(){
				uni.navigateTo({
					url: `/pages/index/returnVisit/returnVisit-details`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.patient-content{
		padding:20rpx 2.5% 0;
	}
	
	.patient-information{
		background-color:white;
		border-radius:10rpx;
		box-shadow:0 1rpx 10rpx #cccccc;
		padding:40rpx;
		
		.patient-portrait{
			width: 150rpx;
			image{
				width: 110rpx;
				height: 110rpx;
			}
		}
	}
	
	.patient-information-details{
		line-height: 55rpx;
		
		.editBtn{
			color: #8abaff;
			border:1px solid #8abaff;
			padding: 5rpx 16rpx;
			line-height: 50rpx;
			border-radius: 6rpx;
		}
	}
	
	.patient-operation{
		flex-wrap:wrap;
		background-color:white;
		margin:30rpx 0;
		box-shadow:0 1rpx 10rpx #cccccc;
		border-radius:8rpx;
		padding:50rpx 20rpx 10rpx;
		
		.patient-operation-item{
			width: 33.33%;
			text-align: center;
			height:180rpx;
			
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>
